<template>
    <div ref="chartDom" style="width:24vw; height:24vh;"></div>
</template>

<script>
export default {
    name: 'major',
    data() {
        return {
            chartInstance: null,
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.chartDom);

            const categories = ['水利水电工程', '机械设计制造及其自动化', '应用化学', '包装工程', '电气工程及其自动化', '车辆工程', '工业工程', '工程管理', '电气工程与智能控制', '能源与动力工程'];
            const data = [32.26, 33.06, 33.33, 35.00, 35.32, 38.00, 39.02, 42.86, 42.86, 45.78];
            const colors = ['#ff6b6b', '#f7b267', '#70c1b3', '#6a8caf', '#4ecdc4', '#c06c84', '#9b5de5'];

            const option = {
                backgroundColor: '#0b1f42',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: "#ccc"
                    }
                },
                grid: {
                    top: '2%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#fff' } },
                    splitLine: { show: false },
                    axisLabel: { color: '#fff', fontSize: 10 },
                },
                yAxis: {
                    type: 'category',
                    data: categories,
                    axisLine: { lineStyle: { color: '#fff' } },
                    axisLabel: { color: '#fff', fontSize: 10 }
                },
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%', // 尽量占满格子
                        barCategoryGap: '30%', // 控制分类间距
                        label: {
                            show: true,
                            position: 'right',
                            color: '#ffffff',
                            fontSize: 10,
                            formatter: '{c}%'
                        },
                        data: data.map((value, index) => ({
                            value,
                            itemStyle: {
                                color: colors[index % colors.length],
                                borderRadius: [0, 10, 10, 0] // 顶部圆角
                            }
                        }))
                    }
                ]
            };

            this.chartInstance.setOption(option);
            window.addEventListener('resize', this.handleResize);
        },
        handleResize() {
            if (this.chartInstance) {
                this.chartInstance.resize();
            }
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
    }
};
</script>

<style scoped>
/* 样式由 ECharts 控制 */
</style>